<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <title>纸上的彩虹</title>
    <link rel='icon' href='/app/static/images/logo.ico'>
  <style type='text/css'>
      html body {
          display: block !important;
      }
      #app-loading {
          font-size: 100%;
          font-family: 'Open Sans';
          font-weight: 100;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -mos-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          text-align:center;
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          -khtml-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          cursor:default;
          width:80%;
          height:36px;
          overflow:visible;
      }
      #app-loading div {
          position:absolute;
          width:30px;
          height:36px;
          margin:0 10px;
          opacity:0;
          animation:move 2s linear infinite;
          -o-animation:move 2s linear infinite;
          -moz-animation:move 2s linear infinite;
          -webkit-animation:move 2s linear infinite;
          transform:rotate(180deg);
          -o-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -webkit-transform:rotate(180deg);
          color:#FF0000;
          font-size:3em;
      }
      #app-loading div:after{
          content:'';
          position:absolute;
          bottom:-40px;
          left:0px;
          width:30px;
          height:5px;
          background:#cccccc;
          -webkit-border-radius: 100%;
          -moz-border-radius: 100%;
          border-radius: 100%;
      }
      #app-loading div:nth-child(2) {
          color: #FF7F00;
          animation-delay:0.2s;
          -o-animation-delay:0.2s;
          -moz-animation-delay:0.2s;
          -webkit-animation-delay:0.2s;
      }
      #app-loading div:nth-child(3) {
          color: #FFFF00;
          animation-delay:0.4s;
          -o-animation-delay:0.4s;
          -webkit-animation-delay:0.4s;
          -webkit-animation-delay:0.4s;
      }
      #app-loading div:nth-child(4) {
          color: #00FF00;
          animation-delay:0.6s;
          -o-animation-delay:0.6s;
          -moz-animation-delay:0.6s;
          -webkit-animation-delay:0.6s;
      }
      #app-loading div:nth-child(5) {
          color: #00FFFF;
          animation-delay:0.8s;
          -o-animation-delay:0.8s;
          -moz-animation-delay:0.8s;
          -webkit-animation-delay:0.8s;
      }
      #app-loading div:nth-child(6) {
          color: #0000FF;
          animation-delay:1s;
          -o-animation-delay:1s;
          -moz-animation-delay:1s;
          -webkit-animation-delay:1s;
      }
      #app-loading div:nth-child(7) {
          color: #8B00FF;
          animation-delay:1.2s;
          -o-animation-delay:1.2s;
          -moz-animation-delay:1.2s;
          -webkit-animation-delay:1.2s;
      }
      @keyframes move {
          0% {
              right:0;
              opacity:0;
          }
          35% {
              right: 41%;
              -moz-transform:rotate(0deg);
              -webkit-transform:rotate(0deg);
              -o-transform:rotate(0deg);
              transform:rotate(0deg);
              opacity:1;
          }
          65% {
              right:59%;
              -moz-transform:rotate(0deg);
              -webkit-transform:rotate(0deg);
              -o-transform:rotate(0deg);
              transform:rotate(0deg);
              opacity:1;
          }
          100% {
              right:100%;
              -moz-transform:rotate(-180deg);
              -webkit-transform:rotate(-180deg);
              -o-transform:rotate(-180deg);
              transform:rotate(-180deg);
              opacity:0;
          }
      }

      @-moz-keyframes move {
          0% {
              right:0;
              opacity:0;
          }
          35% {
              right:41%;
              -moz-transform:rotate(0deg);
              transform:rotate(0deg);
              opacity:1;
          }
          65% {
              right:59%;
              -moz-transform:rotate(0deg);
              transform:rotate(0deg);
              opacity:1;
          }
          100% {
              right:100%;
              -moz-transform:rotate(-180deg);
              transform:rotate(-180deg);
              opacity:0;
          }
      }

      @-webkit-keyframes move {
          0% {
              right:0;
              opacity:0;
          }
          35% {
              right:41%;
              -webkit-transform:rotate(0deg);
              transform:rotate(0deg);
              opacity:1;
          }
          75% {
              right:59%;
              -webkit-transform:rotate(0deg);
              transform:rotate(0deg);
              opacity:1;
          }
          100% {
              right:100%;
              -webkit-transform:rotate(-180deg);
              transform:rotate(-180deg);
              opacity:0;
          }
      }

      @-o-keyframes move {
          0% {
              right:0;
              opacity:0;
          }
          35% {
              right:41%;
              -o-transform:rotate(0deg);
              transform:rotate(0deg);
              opacity:1;
          }
          65% {
              right:59%;
              -o-transform:rotate(0deg);
              transform:rotate(0deg);
              opacity:1;
          }
          100% {
              right:100%;
              -o-transform:rotate(-180deg);
              transform:rotate(-180deg);
              opacity:0;
          }
      }
  </style>
</head>
<body>

  <div id="app">
    <div id="app-loading">
      <div>L</div>
      <div>O</div>
      <div>A</div>
      <div>D</div>
      <div>I</div>
      <div>N</div>
      <div>G</div>
    </div>
  </div>
</body>
</html>
